import router from "@/router";
import setting from "@/setting";
import nprogress from "nprogress";
//引入进度条样式
import "nprogress/nprogress.css";
import { useUserStore } from "@/store";
import pinia from "@/store";

nprogress.configure({ showSpinner: false });

const userStore = useUserStore(pinia);

// 全局前置守卫
router.beforeEach(async (to, from, next) => {
  document.title = `${setting.title} - ${to.meta.title}`;
  nprogress.start();
  const token = userStore.token;
  const userInfo = userStore.userInfo;
  // 用户登录判断
  if (token) {
    // 登录成功之后不能访问login，指向首页
    if (to.path == "/login") {
      next({ path: "/" });
    } else {
      if (JSON.stringify(userInfo) !== "{}") {
        next();
      } else {
        // 如果没有用户信息，则在守卫这里发请求获取到了用户信息再放行
        try {
          await userStore.setUserInfo();
          // 注意：刷新的时候是异步路由，有可能获取到用户信息、异步路由还没有加载完毕，出现空白的效果
          next({ ...to, replace: true });
        } catch (error) {
          // token过期
          await userStore.userLogout();
          next({ path: "/login", query: { redirect: to.path } });
        }
      }
    }
  } else {
    // 用户未登录判断
    if (to.path == "/login") {
      next();
    } else {
      next({ path: "/login", query: { redirect: to.path } });
    }
  }
});

// 全局后置守卫
router.afterEach(() => {
  nprogress.done();
});

/* 
  偶发在动态加载路由的时候，跳转页面报错 TypeError: Failed to fetch dynamically imported module
  但是重新刷新后恢复正常
  如果你的项目在二级目录下，此时需要在to.fullpath前加上import.meta.env.BASE_URL或者你的目录名
*/
router.onError((error, to) => {
  if (error.message.includes("Failed to fetch dynamically imported module")) {
    window.location = to.fullPath;
  }
});
